<template>
  <div id="app" ref="charts" style="width: 400px;height: 60px"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'index',
  //初始化页面完成后对dom节点进行操作
  mounted() {
    //  初始化
    let chartsType = echarts.init(this.$refs.charts)
    //选项
    chartsType.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '30%'],
        show: false
      },
      visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 1,
            lt: 3,
            color: 'rgba(0, 0, 180, 0.4)'
          },
          {
            gt: 5,
            lt: 7,
            color: 'rgba(0, 0, 180, 0.4)'
          }
        ]
      },
      series: [
        {
          type: 'line',
          smooth: 0.6,
          symbol: 'none',
          lineStyle: {
            color: '#5470C6',
            width: 5
          },
          itemStyle: {
            opacity: 0
          },
          areaStyle: {},
          data: [15, 65, 91, 55, 42, 56, 66, 11]
        }
      ]
    })

  }

}
</script>

<style scoped>

</style>
